<template>
  <div class="py-16px">
    <n-grid cols="1 s:2 m:3 xl:8 2xl:8" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item v-for="item in navData" :key="item.type">
        <n-card content-style="padding-top:0" size="small" :bordered="false">
          <template #footer>
            <n-skeleton v-if="loading" size="small" />
            <div v-else class="cursor-pointer">
              <p class="flex-x-center">
                <span>
                  <n-icon :size="32" class="flex-1" :color="item.color">
                    <Icon :type="item.type" />
                  </n-icon>
                </span>
              </p>
              <p class="flex-x-center">
                <span>{{ item.label }}</span>
              </p>
            </div>
          </template>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
import { Icon } from './common'

interface NavData {
  label: string
  color: string
  type: string
}
defineProps({
  loading: {
    type: Boolean,
    required: true,
  },
})

const navData: NavData[] = [
  {
    label: '用户',
    color: '#69c0ff',
    type: 'user',
  },
  {
    label: '分析',
    color: '#69c0ff',
    type: 'analysis',
  },
  {
    label: '商品',
    color: '#ff9c6e',
    type: 'goods',
  },
  {
    label: '订单',
    color: '#b37feb',
    type: 'order',
  },
  {
    label: '票据',
    color: '#ffd666',
    type: 'bill',
  },
  {
    label: '消息',
    color: '#5cdbd3',
    type: 'message',
  },
  {
    label: '标签',
    color: '#ff85c0',
    type: 'tag',
  },
  {
    label: '配置',
    color: '#ffc069',
    type: 'config',
  },
]
</script>

<style scoped></style>
